<template>
 <div class="g-rowl1">
   <div class="g-topb1">
    <div class="ll">
      <div class="g-titb1">
        <div class="h3">预警信息</div>
      </div>
    </div>
    <div class="rr">
      <router-link to="/" class="g-btnb1">
        <img src="@img/b-i1.png" alt="" class="icn" />
        <span>返回首页</span>
      </router-link>
    </div>
    <img src="@img/b-line1.png" alt="" class="line" />
  </div>
  <div class="content">
    <div class="col-l">
      <div class="g-boxl2" :style="'background-image: url(' + getImageUrl('warnbgl1.png') + ');'">
        <div class="m-warnl">
          <div class="left">
            <div class="tit">检测值</div>
            <div class="num">53%</div>
            <div class="pic">
              <img :src="getImageUrl('warnimgl1.png')" alt="">
            </div>
          </div>
          <div class="right">
            <div class="tips">
              <div class="icon">
                <img :src="getImageUrl('warniconl1.png')" alt="">
              </div>
              <div class="tit">异常信息滚动显示,试验基地1氨气浓度异常:75mg/m</div>
            </div>
            <div class="m-resultl">
              <div class="top">
                <div class="tit">异常处理结果</div>
                <div class="btn">提交</div>
              </div>
              <div class="result">
                <textarea class="txt">由于风机损坏通风不畅,导致氨气浓度异常偏高,故障已修复,氨气浓度降至安全水平</textarea>
              </div>
            </div>
          </div>
        </div>
        <div class="m-chartl2">
          <pieChart 
            :chartid="piedata.chartid"
            :xData="piedata.xData"
            :barD="piedata.barD"
            :lineD1="piedata.lineD1"
            :lineD2="piedata.lineD2"
            :lineD3="piedata.lineD3"
            :lineD4="piedata.lineD4"></pieChart>
        </div>  
      </div>
    </div>
    <div class="col-r">
      <div class="m-handlel" :style="'background-image: url(' + getImageUrl('warnbgl2.png') + ');'">
        <div class="m-selectl1 styl2 w434">
          <a-select
            ref="select"
            v-model:value="value1"
            placeholder="请选择"
          >
            <a-select-option value="1">所有养殖场</a-select-option>
            <a-select-option value="2">畜牧养殖场1</a-select-option>
            <a-select-option value="3">畜牧养殖场2</a-select-option>
            <a-select-option value="4">畜牧养殖场3</a-select-option>
          </a-select>
        </div>
        <div class="m-radiol">
          <a-radio-group v-model:value="value" name="radioGroup">
            <a-radio value="1">已处理</a-radio>
            <a-radio value="2">未处理</a-radio>
          </a-radio-group>
        </div>
        <div class="m-listl1">
          <ul class="ul-listl4 styl1">
            <li v-for="(item,index) in listl1" :key="index" :class="index == act ?'on':''">
              <div class="con">
                <div class="icon" :style="'background-image: url(' + item.bgsrc + ');'">
                  <img :src="item.src" alt="">
                </div>
                <div class="txt">
                  <div class="tit">{{item.tit}}</div>
                  <div class="date">
                    <span>{{item.date1}}</span>
                    <span>{{item.date2}}</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <div class="bot">
            <div class="g-pages">
              <a-pagination
                v-model:current="current"
                v-model:page-size="pageSize"
                :total="85"
                showQuickJumper
              ></a-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
 </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue';
import pieChart from '../components/pieChart.vue';

function getImageUrl (name) {
  return new URL(`../assets/images/${name}`, import.meta.url).href;
}

const piedata= reactive({
  chartid:"echartsl2",
  xData:["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24"],
  barD:[100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100],
  lineD1:[30, 31, 32, 31, 30, 31, 32, 31, 30, 31, 32, 31, 30, 31, 32, 31, 30, 31, 32, 31, 30, 31, 32, 31],
  lineD2:[24, 24, 24, 24, 25, 25, 26, 25, 25, 24, 23, 24, 24, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25],
  lineD3:[17, 17, 18, 18, 18, 19, 19, 20, 19, 18, 19, 20, 19, 19, 19, 18, 18, 18, 20, 18, 18, 19, 19, 20],
  lineD4:[12, 13, 14, 13, 12, 13, 14, 13, 12, 13, 14, 13, 12, 13, 14, 13, 12, 13, 14, 13, 12, 13, 14, 13],
})
const act = ref("0");
const listl1 = ref([
  {
    bgsrc:getImageUrl('bgl15.png'),
    src:getImageUrl('iconl7.png'),
    tit:"试验基地1氨气浓度异常:的总数据展示情况75mg/m3",
    date1:"2024/08/01",
    date2:"16:20:21"
  },
  {
    bgsrc:getImageUrl('bgl15.png'),
    src:getImageUrl('iconl7.png'),
    tit:"试验基地1氨气浓度异常:的总数据展示情况75mg/m3",
    date1:"2024/08/01",
    date2:"16:20:21"
  },
  {
    bgsrc:getImageUrl('bgl15.png'),
    src:getImageUrl('iconl7.png'),
    tit:"试验基地1氨气浓度异常:的总数据展示情况75mg/m3",
    date1:"2024/08/01",
    date2:"16:20:21"
  },
  {
    bgsrc:getImageUrl('bgl15.png'),
    src:getImageUrl('iconl7.png'),
    tit:"试验基地1氨气浓度异常:的总数据展示情况75mg/m3",
    date1:"2024/08/01",
    date2:"16:20:21"
  }
])

// select
const value1 = ref("1");
// radio
const value = ref("2");

// 页码
const current = ref(2);
const pageSize = ref(20);

</script>
